<template>
  <div class="w750" style="background: #fff;">
    <div class="login">
      <div class="login-box">
        <div class="item">
          <input type="text" class="item-input" v-model="phone" maxlength="11" placeholder="请输入注册时使用的手机号">
        </div>
        <div class="item code">
          <input type="text" class="item-input" maxlength="6" v-model="code" placeholder="请输入短信验证码">
					<getvali-date codeType="forget" :codeMobile="phone"  :class="'code-txt'" />

          
          <!-- <div class="code-txt" @click.prevent="getVerifyCode()">{{countDown == 0 ? '发送验证码' : '重新发送'+(countDown)+'秒'}}</div> -->
        </div>
        <div class="item">
          <input type="password" class="item-input" v-model="pasw" placeholder="请输入新密码">
        </div>
        <div class="item">
          <input type="password" class="item-input" v-model="surePwd" placeholder="确认新密码">
        </div>
      </div>
      <div class="b-btn" @click="register" :class="themes.theme"><span  class="btn-r">确认</span></div>
    </div>
  </div>
</template>

<script>
  import { NavBar } from "vant";
  import {mapState} from 'vuex'
  import getvaliDate from 'components/getvaliDate/getvaliDate'
  import { forgetPwd } from "api/register";
  export default {
    components: {
      NavBar,
      getvaliDate
    },
    data() {
      return {
        userName: "", // 手机号码，或者用户名，邮箱
        pasw: "", //密码
        surePwd: "", //再次输入密码
        phone: "", // 手机号码
        code: "", //验证码
        countDown: 0, // 倒计时
        isUsername: true,       //用户名是否重复  true为重复
        isPhone: true,       //手机号是否重复  true为重复
        agreement: false,          //注册协议
      };
    },
    mounted() {

      let that = this
	  document.title = this.$route.query.title

    },
    methods: {
      //两次密码是否一致
      checkPwd() {
        if((this.pasw.length &&this.surePwd.length) &&(this.pasw == this.surePwd)) {

        }else {
          this.$toast('两次密码不一致')
        }
      },
      //找回密码
      register() {
        if(!this.phone) {
          this.$toast('请输入手机号')
          return
        }else {
          if(this.phoneRight == false) {
            this.$toast("请输入正确的手机号码");
            return;
          }
        }
        if(!this.code) {
          this.$toast('请输入验证码')
          return
        }
        if(!this.pasw) {
          this.$toast('请输入新密码')
          return
        }
        if(!this.surePwd) {
          this.$toast('请再次输入新密码')
          return
        }
        if((this.pasw && this.surePwd) && (this.pswRegx && this.pswRegx1)) {
          if((this.pasw.length &&this.surePwd.length) &&(this.pasw == this.surePwd)) {

          }else {
            this.$toast('两次密码不一致')
            return
          }
        }else {
          this.$toast('密码应为6-20位字母、数字和标点符号的组合')
          return
        }
        forgetPwd({phone: this.phone, code: this.code, newPwd: this.pasw}).then(res => {
          if(res.status == 1) {
            this.$toast('修改成功')
            this.$router.push('/login')
          }else {
            this.$toast(res.msg)
          }
        })
      },
    },
    computed: {
      ...mapState(['themes']),
      //检测手机号码是否正确
      phoneRight() {
        return /^1[0-9][0-9]{9}$/.test(this.phone);
      },
      //检测密码是否正确
      pswRegx() {
        return  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-z]|[A-Z]|[0-9]){6,20}$/.test(this.pasw);
      },
      //检测密码是否正确
      pswRegx1() {
        return  /^[0-9A-z`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]+$/.test(this.pasw);
      }
    }
  };
</script>


<style src="../../assets/css/login.css" scoped></style>
